<template>
  <div style="padding: 28px;">
    <div style="display: flex;justify-content: space-between;">
      <div
        style="width: 30%;height: 334;background: #FFFFFF;padding: 20px 32px;"
      >
        <CampLevel></CampLevel>
      </div>

      <div
        style="width: 30%;height: 334;background: #FFFFFF;padding: 20px 32px;"
      >
        <CampType></CampType>
      </div>

      <div
        style="width: 19%;height: 334;background: #FFFFFF;padding: 20px 32px;"
      >
        <div style="font-size: 16px;color: #1D2129;font-weight: 500;">
          营地成员情况
        </div>
        <div
          style="width: 254px;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
        >
          <img
            src="@/assets/img/Frame@2x (3).png"
            alt=""
            style="width: 44px;height: 44px;margin-top: 11px;"
          />
          <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
            {{ datalist.coachNum }}
          </div>
          <div style="font-size: 11px;font-weight: 400;">指导教员总人数</div>
        </div>
        <div
          style="width: 254px;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
        >
          <img
            src="@/assets/img/Frame@2x (4).png"
            alt=""
            style="width: 44px;height: 44px;margin-top: 11px;"
          />
          <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
            {{ datalist.teacherNum }}
          </div>
          <div style="font-size: 11px;font-weight: 400;">教练员总人数</div>
        </div>
      </div>
      <div
        style="width: 19%;height: 334;background: #FFFFFF;padding: 20px 32px;"
      >
        <div style="font-size: 16px;color: #1D2129;font-weight: 500;">
          营地活动详情
        </div>
        <div
          style="width: 254px;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
        >
          <img
            src="@/assets/img/Frame@2x (5).png"
            alt=""
            style="width: 44px;height: 44px;margin-top: 11px;"
          />
          <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
            {{ datalist.yearActivityNum }}
          </div>
          <div style="font-size: 11px;font-weight: 400;">年均举办数量/次</div>
        </div>
        <div
          style="width: 254px;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
        >
          <img
            src="@/assets/img/Frame@2x (6).png"
            alt=""
            style="width: 44px;height: 44px;margin-top: 11px;"
          />
          <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
            {{ datalist.yearJoinPeopleNum }}
          </div>
          <div style="font-size: 11px;font-weight: 400;">
            年均参加学生数量/人
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 16px;display: flex;justify-content: space-between;">
      <div style="width: 100%;height: 391px;background: #FFFFFF;">
        <CarryOutActivities></CarryOutActivities>
      </div>
    </div>

    <div style="margin-top: 16px;display: flex;justify-content: space-between;">
      <div style="width: 100%;height: 800px;background: #FFFFFF;">
        <HonorAward></HonorAward>
      </div>
    </div>
  </div>
</template>

<script>
import CampLevel from "./components/CampLevel.vue";
import CampType from "./components/CampType.vue";
import CarryOutActivities from "./components/CarryOutActivities.vue";
import HonorAward from "./components/HonorAward.vue";
import { num_data } from "@/api/statistics";
export default {
  components: {
    CampLevel,
    CampType,
    CarryOutActivities,
    HonorAward
  },
  data() {
    return {
      datalist: {}
    };
  },
  mounted() {
    this.selectData();
  },

  methods: {
    selectData() {
      num_data().then(res => {
        this.datalist = res.data;
      });
    }
  }
};
</script>

<style></style>
